import React from "react";
import { inject, observer } from "mobx-react";
import { axiosGet } from "../../../axios";
import { url, simimv, mv } from "../../../api";
import { VideoCameraOutlined, PlayCircleOutlined } from "@ant-design/icons";

@inject("mv")
@observer
class MvDetailSimilar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mvs: "",
    };
  }
  componentDidMount() {
    if (this.props.mv.mvDetail.id) {
      this.getSimiMv();
    }
  }
  //  获取mv相关推荐
  getSimiMv() {
    axiosGet(url, simimv, `mvid=${this.props.mv.mvDetail.id}`).then((data) => {
      this.setState({
        mvs: data.mvs,
      });
    });
  }
  //  设置mv的地址并跳转
  setVideo(item) {
    axiosGet(url, mv, `mvid=${item.id}`).then((data) => {
      this.props.mv.setMvUrl(data.data.brs["480"]);
      this.props.mv.setmvDetail(data.data);
    });
  }
  render() {
      if(this.props.mv.mvDetail.id){
          this.getSimiMv()
      }
    return (
      <div style={{ width: "30%", float: "right" }}>
        <h3>相关推荐</h3>
        {this.props.mv.mvDetail && (
          <ul className='similar'>
            {this.state.mvs &&
              this.state.mvs.map((item, index) => {
                return (
                  <li
                    key={item.id}
                    className="item"
                    onClick={() => {
                      this.setVideo(item);
                    }}
                  >
                    <p className="play-count">
                      <VideoCameraOutlined style={{ marginRight: "5px" }} />
                      {item.playCount}
                    </p>
                    <img src={item.cover} alt=""></img>
                    <p className="name">{item.name}</p>
                    <p className="singer-name">{item.artistName}</p>
                    <PlayCircleOutlined className="play-icon" />
                  </li>
                );
              })}
          </ul>
        )}
      </div>
    );
  }
}
export default MvDetailSimilar;
